﻿<!doctype html>
<html class="no-js">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>晟日果蔬</title>
		<meta name="description" content="">
		<meta name="keywords" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<link rel="icon" type="image/png" href="assets/i/favicon.png">
		<!-- 通用文件引入 -->
  		<#include "../common/mobile-base.html"/>   
  		<script type="text/javascript" charset="utf-8" src="${webRoot!}/js/mobile/mobile.js"></script>
  		<script type="text/javascript" charset="utf-8" src="${webRoot!}/js/mobile/cart.js"></script>
		<script type="text/javascript">
			$(function(){
			    Mobile.path = '${webRoot!}';
			    Mobile.initShopType('${shopType!}');
			    Cart.path = '${webRoot!}';
			    Mobile.initShopSort('${shopPriceSort!}','${shopSellSort!}');
			});
		</script>
		<style> 
		.list-curr{ background: #fff; display: block; border-right: 0;}
		.gm-head-right{ color: #2b2a2a;}
		.gm-head-right a{ color: #2b2a2a;}
		.joan-head{ background: #fff;}
		.gm-head-search input{ border: 1px solid #599a3c;}
		.gm-head-left a, .gm-head-right a{ color: #599a3c;}
		</style>

	</head>
	<body class="gudin am-with-fixed-navbar" >
		<header data-am-widget="header" class="am-header am-header-default joan-head" style="z-index:999;position: fixed; top: 0; left: 0;border: 1px solid #ddd;">
			<div class="gm-head-left">
				<a href="tel:18601344960" class=""><i class="fa fa-whatsapp"></i>客服</a>
			</div>
			<div class="gm-head-search">
				<input type="text" id="search" placeholder="寻找你喜欢的商品" value="${search!}"><i class="am-icon-search" onclick="Mobile.forwardShopType()"></i>
			</div>
		</header>
		<div class="list-content">
			 <div class="list-left" id="shopType">
			 	 <li class="list-curr" id="all" onclick="Mobile.shopTypeClick('all')">全部商品</li>
			 	 <#list busShopTypes as busShopType>
			 	 <li class="" id="${busShopType.stId!}" onclick="Mobile.shopTypeClick('${busShopType.stId!}')">${busShopType.stName!}</li>
			 	 </#list>
			 </div>
			 <div class="list-right">
			 	<ul class="list-menu" id="shopSort">
			 		<!-- 价格排序 -->
			 		<#if sortType=='sortPrice'>
			 			<#if sort='desc'>
			 				<li onclick="Mobile.shopSort(this,'sortPrice')" class="tip-red" id="sortPrice">价格<i class="fa fa-sort-desc"></i></li>
			 			<#else>
				 			<li onclick="Mobile.shopSort(this,'sortPrice')" class="tip-red" id="sortPrice">价格<i class="fa fa-sort-up"></i></li>
			 			</#if>
			 		<#else>
			 			<li onclick="Mobile.shopSort(this,'sortPrice')" id="sortPrice">价格<i class="fa fa-sort-up"></i></li>	
			 		</#if>
			 		<!-- 销量排序 -->
			 		<#if sortType=='sortSell'>
			 			<#if sort='desc'>
			 				<li onclick="Mobile.shopSort(this,'sortSell')" class="tip-red" id="sortSell">销量<i class="fa fa-sort-desc"></i></li>
			 			<#else>
				 			<li onclick="Mobile.shopSort(this,'sortSell')" class="tip-red" id="sortSell">销量<i class="fa fa-sort-up"></i></li>
			 			</#if>
			 		<#else>
			 			<li onclick="Mobile.shopSort(this,'sortSell')" id="sortSell">销量<i class="fa fa-sort-up"></i></li>	
			 		</#if>
			 		
			 		<!-- 时间排序 -->
			 		<#if sortType=='sortTime'>
			 			<#if sort='desc'>
			 				<li onclick="Mobile.shopSort(this,'sortTime')" class="tip-red" id="sortTime">时间<i class="fa fa-sort-desc"></i></li>
			 			<#else>
				 			<li onclick="Mobile.shopSort(this,'sortTime')" class="tip-red" id="sortTime">时间<i class="fa fa-sort-up"></i></li>
			 			</#if>
			 		<#else>
			 			<li onclick="Mobile.shopSort(this,'sortTime')" id="sortTime">时间<i class="fa fa-sort-up"></i></li>	
			 		</#if>
			 	</ul>
			 	<ul><!--ul-->
			 		<#list shops as shop>
			 		<li class="zm">
			 			<div class="zm-l" onclick="window.location.href='${webRoot!}/mobile/forwardShopDetail.do?shopId=${shop.sId!}'">
			 				<div class="pro-img" ><img src="${webRoot!}/upload/${shop.sImgSmall!}"/></div>
			 				<div class="pro-con">
			 					<h2 class="pro-deta" data-id="{$val.id}">${shop.sMobileName!} </h2>
			 					<p class="pro-num" data-id="{$val.id}"> ${shop.shopPrice.spUnit!}（${shop.shopPrice.spSpecification!}）</p>
			 					<p><span>￥${shop.shopPrice.spPrice!}</span><del>￥${shop.shopPrice.spMarketPrice}</del></p>
			 				</div>
			 				
			 			</div>
			 			<div class="zm-r">
			 				<a class="zm-r-j" onclick="Cart.minusNum('${shop.sId!}')">-</a>
			 				<a class="zm-r-num" id="${shop.sId!}-num">1</a>
			 				<a class="zm-r-j" onclick="Cart.plusNum('${shop.sId!}')">+</a>
			 				<a class="zm-r-cart" onclick="Cart.shopAddCard('${shop.sId!}')"><i class="fa fa-cart-plus"></i></a>
			 			</div>
			 		</li>
			 		</#list>
			 		<li style="height: 20px;"></li>
			 	</ul><!--ul-->
			 </div>
		</div>
		
   <div data-am-widget="navbar" class="am-navbar  am-navbar-default gm-foot"  id="">
      <ul class="am-navbar-nav am-cf am-avg-sm-4">
          <li >
            <a href="${webRoot!}/mobile/index.do">
                <span class="am-icon-home"></span>
                <span class="am-navbar-label">首页</span>
            </a>
          </li>
          <li>
            <a href="${webRoot!}/mobile/forwardShopType.do" class="curr">
                <span class="am-icon-th-large"></span>
                <span class="am-navbar-label">商品分类</span>
            </a>
          </li>
         
          <li>
            <a href="${webRoot!}/mobile/forwardShopCar.do" class="">
                <span class="am-icon-shopping-cart"></span>
                <span class="am-navbar-label">购物车<span class="badge badge-danger" id="shopCartNum"><#if shopCartNum gt 0>${shopCartNum!}</#if></span></span>
            </a>
          </li>
          <li >
            <a href="${webRoot!}/mobile/forwardMember.do" class="">
                <span class="am-icon-user"></span>
                <span class="am-navbar-label">个人中心</span>
            </a>
          </li>
      </ul>
  </div>

<script type="text/javascript">
			$(function(){				
				$('.pro-deta').click(function(){
					 var id = $(this).data('id');
					 var $modal = $('.st-pop-'+id);
					 var pop_height = $('.st-slider-box-'+id).height();
//		 			 console.log(pop_height);
					 $('.st-pop-'+id+' .am-modal-bd').html($('.slide-'+id).html());
					 $modal.modal();					 
					 $('.st-slider-'+id).flexslider();
				})
				
				$('.pro-img').click(function(){
					 var id = $(this).data('id');
					 var $modal = $('.st-pop-'+id);
					 var pop_height = $('.st-slider-box-'+id).height();
//		 			 console.log(pop_height);
					 $('.st-pop-'+id+' .am-modal-bd').html($('.slide-'+id).html());
					 $modal.modal();					 
					 $('.st-slider-'+id).flexslider();
				})
</script>
	</body>

</html>